<template>
  <el-cascader :options="gridTree" v-model="gridValue" :props="props" placeholder="请选择省市">
    <template #default="{ node, data }">
      <span>{{ data.gname }}</span>
      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
    </template>
  </el-cascader>
</template>
<script setup>
import { useGridStore } from '@/stores/grid/grid.js'
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'

const gridStore = useGridStore()
const { gridTree, gridValue } = storeToRefs(gridStore)

const props = ref({
  value: 'gname',
  label: 'gname'
})

onMounted(() => {
  gridStore.loadData()
})
</script>

<style scoped lang="scss"></style>
